<style>
    .weui-media-box__title{
        overflow: visible;
        font-size: 14px;
    }
    .weui-navbar__item.weui-bar__item_on{
        color:#1cc721;
    }
</style>
<script type="text/x-template" id='paihang'>
    <div>
        <div class="weui-navbar">
            <div 
                @click="tab=1"
                :class="tab==1?'weui-bar__item_on':''" class="weui-navbar__item">
                连续打卡
            </div>
            <div 
                @click="tab=2"
                :class="tab==2?'weui-bar__item_on':''" class="weui-navbar__item ">
                累计奖励
            </div>
        </div>
        <div v-if="tab==1" class="weui-tab__panel">
            <template v-for="item in lianxu.list">
                <a  class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__hd">
                        <img style="border-radius:100%" class="weui-media-box__thumb" :src="item.fans.headimgurl" alt="">
                    </div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title">{{item.fans.nickname}}</h4>
                        <p class="weui-media-box__desc">连续打卡<span class='color'>{{item.lianxu}}</span>天</p>
                    </div>
                </a>
            </template>
            <div v-if="lianxu.page>0" class="weui-panel__ft">
                <a @click="getLianxuList"  class="weui-cell weui-cell_access weui-cell_link">
                    <div class="weui-cell__bd">查看更多</div>
                    <span class="weui-cell__ft"></span>
                </a>    
            </div>
        </div>
        <div v-if="tab==2" class="weui-tab__panel">
            <template v-for="item in jiangli.list">
                <a  class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__hd">
                        <img style="border-radius:100%" class="weui-media-box__thumb" :src="item.fans.headimgurl" alt="">
                    </div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title">{{item.fans.nickname}}</h4>
                        <p class="weui-media-box__desc">累计奖励<span class='color'>{{item['sum(money)']}}</span>元</p>
                    </div>
                </a>
            </template>
            <div v-if="jiangli.page>0" class="weui-panel__ft">
                <a @click="getJiangliList" class="weui-cell weui-cell_access weui-cell_link">
                    <div class="weui-cell__bd">查看更多</div>
                    <span class="weui-cell__ft"></span>
                </a>    
            </div>
        </div>
    </div>
</script>
<script>
    var paihang = Vue.component('paihang', {
        template: '#paihang',
        data: function () {
            return {
                tab:1,
                lianxu: {
                    page:1,
                    list:[]
                },
                jiangli: {
                    page:1,
                    list:[]
                }
            }
        },
        created: function () {
            this.getLianxuList();
            this.getJiangliList();
        },
        methods: {
            getLianxuList: function () {
                var self = this;
                http({
                    url: baseUrl + 'lianxulist&page='+self.lianxu.page
                }).then(function(res){
                    res=res.data;
                    if(res.ret==0) {
                        for(var i=0;i<res.data.length;i++) {
                            self.lianxu.list.push(res.data[i]);
                        }
                        self.lianxu.page ++;
                    }else{
                        self.lianxu.page = 0;
                    }
                })
            },
            getJiangliList: function () {
                var self = this;
                http({
                    url: baseUrl + 'jianglilist&page='+self.jiangli.page
                }).then(function(res){
                    res=res.data;
                    if(res.ret==0) {
                        for(var i=0;i<res.data.length;i++) {
                            self.jiangli.list.push(res.data[i]);
                        }
                        self.jiangli.page ++;
                    }else{
                        self.jiangli.page = 0;
                    }
                })
            }
        }
    });
</script>